<template>
  <div>
    <div :class="dataInfo && dataInfo.length > 0 ? 'c-bg-sgray c-pb10':''">
      <my-small-tabbar id="tabhBar" :tabList="tabList" :tabIndex="type" @changeTab="changeType" :class="tabhBarFixed == true ? 'tabhBar' : ''" class="c-bg-white"></my-small-tabbar>
    </div>
    <div class="c-ph24 c-pv20">
      <div class="c-flex-row c-justify-sb c-mb20 c-ph20 c-pv20 c-bg-white c-box-shadow9 c-br10" v-for="(item,index) in dataInfo" :key="index" @click="goTaskDetail(item.faId)">
        <div class="c-bd1 c-ww240 c-maxh160 c-text-hidden c-flex-shrink0">
          <div class="c-w100 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig c-br10'" :fontClass="{
              boxStyle: 'c-pv30 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
              v-if="item.vipInfo && item.vipInfo.cover"/>
            <img v-else v-lazy="item.prodType != 5 ? (item.avatar ? item.avatar : require('../../../assets/defult270.png')) : (item.vipType == 2 ? require('../../../assets/i/wap/course/vip.png') : require('../../../assets/i/wap/course/svip.png'))" class="c-w100 c-block c-maxh imgCloseBig" />
          </div>
        </div>
        <div class="c-maxh180 c-flex-column c-justify-sa c-pl20 c-flex-grow1">
          <div>
            <div class="c-text-ellipsis2 c-fs24 c-fc-xblack">{{item.name}}</div>
            <span class="c-fc-gray c-fs18">活动时间：{{item.startAt.split(" ")[0]}}-{{item.endAt.split(" ")[0]}}</span>
          </div>
          <span class="c-fs18 c-fc-xblack">任务进度({{item.count}}/{{item.people}})</span>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="dataInfo == null || dataInfo.length == 0" :noMoreData="is_page == false && (dataInfo && dataInfo.length > 0)" :noDataText="'暂无相关记录'" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: 'MyTask',
  components: {
    MySmallTabbar,
    VipCustomImg,
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      is_page: false,
      page: 1,
      limit: 10,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      type: 0,
      dataInfo: [],
      isLoading: false,
      tabList: [{
        title: '已完成',
        index: 1,
      }, {
        title: '进行中',
        index: 2,
      }, {
        title: '已过期',
        index: 3,
      }],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    //改变助力类别
    changeType: function (type) {
      this.type = type;
      this.dataInfo = [];
      this.page = 1;
      this.getList();
    },
    //跳转到助力详情页面
    goTaskDetail: function (faId) {
      this.$routerGo(this, "push", { path: "/homePage/task/task", query: { 'faId': faId, 'refereeId': localStorage.getItem("userId") } });
    },
    //分页获取助力列表
    getList: function () {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'friendHelpers/tasks?status=' + this.type + '&page=' + this.page + '&limit=' + this.limit, function (res) {
          if ($this.page == 1) {
            $this.dataInfo = res.data;
          } else {
            let list = res.data;
            $this.dataInfo = $this.dataInfo.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;
          $this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的助力", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的助力", "", shareUrl, "");
    },
    //下拉获取更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    initData() {
      this.page = 1;
      this.type = 1;
      this.is_page = false;
      this.dataInfo = [];
      this.getList();
    },
  },
  activated() {
    //我发起的助力
    setDocumentTitle("我的助力");// eslint-disable-line   
    // this.dataInfo = [];
    // this.page = 1;
    // this.is_page = false;
    if (utilJs.checkNeedInitData(this.dataInfo, this.page)) {
      // this.getMore();
      this.initData()
    }
    // this.getList();
    this.wechatShare();
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
